<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="fonts/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <style>
        table{
            /* min-height: 1000px; */
            margin: 20px auto;
            width: 1000px;
        }
        table tr{
            height: 40px;
            text-align: center;
        }
        /* table tr th:nth-child(1){
            width:500px ;
        } */
        table tr td input{
            margin-left: 20px;
            display: block;
            width: 50px;
        }
        img{width: 130px;height: 130px;padding-left: 20px;}
    </style>
</head>
<body>
    <!-- top -->
    <div class="topWrap">
        <div class="top">
            <div class="top_nav">
                <a href="index.html" target="_self">蜜眸小铺首页</a>
                <a href="https://weibo.com/gansofood" target="_blank">蜜眸小铺官方微博</a>
            </div>
            <div class="top_r">
                <div class="login">
                    <a href="./pages/register.html"  target="_blank">注册</a>
                    <a href="./pages/login.html">登录</a>
                    <a href="#">我的订单</a>
                    <a href="">消息中心</a>
                </div>
                <div class="welcome">
                    <p>欢迎<em id="userName">XXX</em>，<span id="logout"><a>注销</a></span></p>
                </div>
				<div class="shopcar">
					<span class="iconfont icon-gouwuche"></span>
					<i><a href="shopCar.html">购物车</a></i>
				</div>
            </div>
        </div>
    </div>

    <!-- topimg -->
    <div class="topimgWrap">
        <div class="topimg">
            <img src="http://ganso.com.cn/medias/-1200-90.jpg?context=bWFzdGVyfGltYWdlc3w2Nzc1NHxpbWFnZS9qcGVnfGltYWdlcy9oOGYvaGQ0LzEwMjY4Njc3MzA4NDQ2LmpwZ3wzMDIzZTE5OWRmNjYyZmZiZDhhOTAxYTQ3OTY4YWQyYjZlNjZiNDRlMTg3MWEzNzYzNGY3NmI1OWM3NTc5MjY5" alt="">
        </div>
    </div>


    <!-- header-->
    <div class="headerWrap">
	<div class="header">
		<h1 class="logo"><img src="image/logo.png" alt=""></h1>
		<div class="search">
			<div class="sousuo">
                <input type="text" class="text"  placeholder="想吃的甜品&nbsp;搜索一下">
			</div>
			<div class="btn">
                <input type="submit" class="submit" value="搜索"/>
			</div>
        </div>
    
        <div class="img">
            <img src="http://ganso.com.cn/medias/-.JPG?context=bWFzdGVyfGltYWdlc3w0NTAwNHxpbWFnZS9qcGVnfGltYWdlcy9oNzgvaGE2LzEwMTk1MjgwMDM1ODcwLmpwZ3wyNzMwNWViMzkyNjMzNzFjMTIwNjg4YmNmODQwMGMwMDRlYzhhMjA5ZTM5MzcxYThkYzRmNTkwYjVjM2FlNmJm" alt="">
        </div>
    </div>
    </div>

     <!-- tit -->
     <div class="titWrap">
        <ul class="tit">
            <li>
                <a href="">全部商品分类</a>
                <a href="">品牌集成管</a>
                <a href="">大师名匠馆</a>
                <a href="">积分商城</a>
                <a href="">甜品定制</a>
            </li>
            </ul>
    </div>

    
    <table border=1 width=800 align="center" cellspacing=0>
        <thead>
            <tr>
                <th>图片</th>
                <th width=200>名字</th>
                <th>单价</th>
                <th width=100>数量</th>
                <th>总价</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    
    <!-- footer -->
    <footer class="mt20 center clean">			
        <div class="mt20">蜜眸小铺甜品屋</div>
        <div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
        <div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
    </footer>	
</body>
<script>
    class Car{
        constructor(){
            
            this.tBody = document.querySelector("tbody");
        }
        getData(){
            if(localStorage.getItem("goodsMsg")){
                this.gm = JSON.parse(localStorage.getItem("goodsMsg"));
                console.log(this.gm)
            }else{
                this.gm = [];
            }
            this.display();
        }
        display(){
            var str = "";
            for(var i=0;i<this.gm.length;i++){
                str += `<tr index="${this.gm[i].goodsId}">
                        <td><img src="${this.gm[i].msg.img.largeImg[0]}"></td>
                        <td>${this.gm[i].msg.name}</td>
                        <td>${this.gm[i].msg.price}</td>
                        <td><input type="number" min="1" value="${this.gm[i].num}" class="number"></td>
                        <td>${ this.gm[i].msg.price * this.gm[i].num }</td>
                        <td class="delete">删除</td>
                        </tr>`
                        console.log(this.gm[i].msg.price) 
                        console.log(this.gm[i].num) 

                        
            }
            this.tBody.innerHTML = str;   
        }
        addEvent(){
            console.log(this.goodsId);
            var that = this;
            this.tBody.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.className === "delete"){
                    that.id = tar.parentNode.getAttribute("index");
                    tar.parentNode.remove();
                    that.changeData(function(i){
                        that.gm.splice(i,1);
                    });
                }
            }
            this.tBody.oninput = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.className === "number"){
                    that.id = tar.parentNode.parentNode.getAttribute("index");
                    that.changeData(function(i){
                        that.gm[i].num = tar.value;
                    });
                    tar.parentNode.nextElementSibling.innerHTML = tar.value * tar.parentNode.previousElementSibling.innerHTML;
                }
            }
        }
        changeData(cb){
            for(var i=0;i<this.gm.length;i++){
                if(this.gm[i].goodsId === this.id){
                    cb(i);
                    break;
                }
            }
            localStorage.setItem("goodsMsg",JSON.stringify(this.gm));
        }
    }

    var c = new Car();
    c.getData();
    c.addEvent();

</script>
</html>